<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>

<body>
    <p>
        <!-- <button onclick="openMediaQ()">打开前置</button>
        <button onclick="openMediaH()">打开后置</button>
        <button onclick="closeMedia()">关闭</button> -->
        <button style="width: 40rem;height:5rem;background-color: #0070c0;color: white;font-size: 3rem;"
            onclick="drawMedia()">拍照</button>
    </p>
    <!-- 摄像展示要用video标签 -->
    <video id="video" class="bg"></video>
    <!-- 截取的照片用canvas标签展示 -->
    <canvas id="qr-canvas"></canvas>
    <img id="CameraPhoto" src="" alt="" style="display: none;">
</body>
<script type="text/javascript">
    var video = document.querySelector('video');
    var text = document.getElementById('text');
    var canvas1 = document.getElementById('qr-canvas');
    var context1 = canvas1.getContext('2d');
    var mediaStreamTrack;

    // 一堆兼容代码
    window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
    if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
    }
    if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function (constraints) {
            var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
            if (!getUserMedia) {
                return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
            }
            return new Promise(function (resolve, reject) {
                getUserMedia.call(navigator, constraints, resolve, reject);
            });
        }
    }

    //摄像头调用配置
    var mediaOptsQ = {
        audio: false,
        video: true,
        video: { facingMode: "environment" }, // 调用前置摄像头
        // video: { width: 1280, height: 720 },  //影响呈现的大小。注意不能用百分比
        //  video: { facingMode: { exact: "environment" } }// 这个是调用后置摄像头
    }
    var mediaOptsH = {
        audio: false,
        video: true,
        video: { facingMode: "user" }, // 调用前置摄像头
        // video: { width: 1280, height: 720 },  //影响呈现的大小。注意不能用百分比
        //  video: { facingMode: { exact: "environment" } }// 这个是调用后置摄像头
    }

    // 回调
    function successFunc(stream) {
        mediaStreamTrack = stream;
        video = document.querySelector('video');
        if ("srcObject" in video) {
            video.srcObject = stream
        } else {
            video.src = window.URL && window.URL.createObjectURL(stream) || stream
        }
        video.play();
    }
    function errorFunc(err) {
        alert(err.name);
    }

    // 正式启动摄像头
    function openMediaQ() {
        navigator.mediaDevices.getUserMedia(mediaOptsQ).then(successFunc).catch(errorFunc);
    }
    function openMediaH() {
        navigator.mediaDevices.getUserMedia(mediaOptsH).then(successFunc).catch(errorFunc);
    }

    //关闭摄像头
    function closeMedia() {
        mediaStreamTrack.getVideoTracks().forEach(function (track) {
            track.stop();
            context1.clearRect(0, 0, context1.width, context1.height);//清除画布
        });
    }

    //截取视频
    function drawMedia() {
        canvas1.setAttribute("width", video.videoWidth);
        canvas1.setAttribute("height", video.videoHeight);
        context1.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
        let base64Info = getImageBase64Data()
        document.getElementById("CameraPhoto").setAttribute("src", base64Info);
    }

    function getImageBase64Data() {
        let cropImgInfo = context1.getImageData(0, 0, video.videoWidth, video.videoHeight)
        let newCanvas = document.createElement('canvas')
        newCanvas.width = video.videoWidth
        newCanvas.height = video.videoHeight
        let newCtx = newCanvas.getContext('2d')
        newCtx.putImageData(cropImgInfo, 0, 0)
        return newCanvas.toDataURL()
    }
    window.onload = function () {
        openMediaQ()

    };
</script>

</html>